<template>
  <div class="businessPage padding20">
    <p class="overview-title titleInfo" style="text-align: center">
      本平台支持“流水线式”的网络威胁分析业务开展
    </p>
    <div class="content" style="padding-top: 120px">
      <div class="conItem wxqb">
        <div class="title-box item1">
          <div class="title">威胁情报</div>
          <div class="img1"><img src="./imageMy/威胁情报.png" alt="" /></div>
          <div class="img11"><img src="./imageMy/arrow1.png" alt="" /></div>
        </div>
        <CommonPic
          class="businessPagePic"
          :list="dataList1"
          @clickDetail="getDetail"
        ></CommonPic>
      </div>
      <div class="jt" style="margin-top: 240px">
        <img src="./imageMy/arrow.png" alt="" />
      </div>
      <div class="conItem gjjc" style="margin-top: 60px">
        <div class="title-box item2">
          <div class="title">攻击检测</div>
          <div class="img2"><img src="./imageMy/攻击检测.png" alt="" /></div>
          <div class="img11"><img src="./imageMy/arrow2.png" alt="" /></div>
        </div>

        <CommonPic
          class="businessPagePic"
          :list="dataList2"
          @clickDetail="getDetail"
        ></CommonPic>
      </div>
      <div class="jt" style="margin-top: 240px">
        <img src="./imageMy/arrow.png" alt="" />
      </div>
      <div class="conItem syqz" style="margin-top: 120px">
        <!-- <div class="title">溯源取证</div> -->
        <div class="title-box item3">
          <div class="title">溯源取证</div>
          <div class="img3"><img src="./imageMy/溯源取证.png" alt="" /></div>
          <div class="img11"><img src="./imageMy/arrow3.png" alt="" /></div>
        </div>
        <CommonPic
          class="businessPagePic"
          :list="dataList3"
          @clickDetail="getDetail"
        ></CommonPic>
      </div>
      <div class="jt" style="margin-top: 240px">
        <img src="./imageMy/arrow.png" alt="" />
      </div>
      <div class="conItem tsgz">
        <!-- <div class="title">态势感知</div> -->
        <div class="title-box item4">
          <div class="title">溯源取证</div>
          <div class="img4"><img src="./imageMy/态势感知.png" alt="" /></div>
        </div>
        <CommonPic
          class="businessPagePic"
          :list="dataList4"
          @clickDetail="getDetail"
        ></CommonPic>
      </div>
    </div>
  </div>
</template>

<script>
import CommonPic from "./commonPic.vue";
export default {
  name: "",
  components: {
    CommonPic,
  },
  props: {},
  data() {
    return {
      dataList1: [
        {
          courseName: "多网域威胁数据汇聚接入",
          img: require("./imageMy/11.png"),
        },
        {
          courseName: "国家网络空间威胁情报大数据共享开放平台",
          img: require("./imageMy/12.png"),
          httpUrl: "http://10.26.84.18",
        },
        {
          courseName: "全球黑客组织监测雷达 ",
          img: require("./imageMy/13.png"),
          httpUrl: "http://10.26.84.81:8082/#/bigscreen/v3.1",
        },
      ],
      dataList2: [
        {
          courseName: "隐蔽通信检测系统",
          httpUrl: "https://192.168.119.155:18830/",
          img: require("./imageMy/21.jpg"),
        },

        {
          courseName: "加密流量分析系统",
          img: require("./imageMy/DNS检测.png"),
          httpUrl: "http://192.168.113.105:860/#/",
        },
        {
          courseName: "恶意DNS检测系统",
          img: require("./imageMy/22.png"),
        },
        {
          courseName: "IMAS恶意文件分析平台",
          img: require("./imageMy/25.png"),
          httpUrl: "http://10.26.84.150:9123",
        },
      ],
      dataList3: [
        {
          courseName: "日志分析系统",
          img: require("./imageMy/日志分析.png"),
          httpUrl: "http://10.26.86.227:8000/#/dashboard",
        },
        {
          courseName: "邮件分析系统",
          httpUrl: "http://10.26.86.168/",
          img: require("./imageMy/32.png"),
        },
        {
          courseName: "数据取证系统",
          img: require("./imageMy/数据恢复.jpg"),
        },
      ],
      dataList4: [
        {
          courseName: "态势展示",
          httpUrl: "http://192.168.118.18:8017/#/organizationData",
          img: require("./imageMy/34.png"),
        },
        {
          courseName: "综合指挥系统",
          img: require("./imageMy/指挥.jpg"),
        },
      ],
    };
  },
  methods: {
    getDetail(row) {
      console.log(1111, row);
      if (row.httpUrl) {
        window.open(row.httpUrl, "_blank");
      } else {
        this.$message.warning("暂不支持查看详情！");
      }
    },
  },
  mounted() {},
  created() {},
};
</script>

<style lang="less">
.businessPage .content {
  display: flex;
  margin-top: 50px;
  justify-content: center;
  .conItem {
    position: relative;
    // flex: 1;
    width: 400px;
    margin: 4px 6px;
    padding-top: 40px;
    background: #ffffff;
    border: 3px solid #ccddff;
    box-shadow: 0px 4px 20px rgba(0, 9, 26, 0.1);
    border-radius: 2px;
    .title-box.item1 {
      position: relative;
      .img1 {
        position: absolute;
        width: 80px;
        height: 80px;
        top: -60px;
        left: 50%;
        margin-left: -40px;
      }
      .img11 {
        position: absolute;
        width: 1117px;
        height: 18px;
        left: 260px;
        top: -46px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .title-box.item2 {
      position: relative;
      .img2 {
        position: absolute;
        width: 80px;
        height: 80px;
        top: -60px;
        left: 50%;
        margin-left: -40px;
      }
      .img11 {
        position: absolute;
        width: 655px;
        height: 18px;
        left: 260px;
        top: -46px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .title-box.item3 {
      position: relative;
      .img3 {
        position: absolute;
        width: 80px;
        height: 80px;
        top: -60px;
        left: 50%;
        margin-left: -40px;
      }
      .img11 {
        position: absolute;
        width: 172px;
        height: 18px;
        left: 260px;
        top: -46px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .title-box.item4 {
      position: relative;
      .img4 {
        position: absolute;
        width: 80px;
        height: 80px;
        top: -60px;
        left: 50%;
        margin-left: -40px;
      }
    }
    .title {
      margin: 0 auto;
      margin-top: -100px;
      width: 240px;
      padding: 18px 10px;
      font-weight: 700;
      font-size: 20px;
      line-height: 29px;
      text-align: center;
      border: 4px solid #5babfe;
      border-radius: 2px;
      background-color: #fff;
    }
  }
}
.businessPagePic .commonPicItem {
  width: 90% !important;
}
.businessPagePic .commonPicStyle {
  width: 100% !important;
}
</style>
   <style  lang="less">
@media (min-width: 6000px) and (orientation: landscape) {
  .businessPage .content .conItem {
    position: relative;
    // flex: 1;
    width: 1800px;
    margin: 4px 6px;
    padding-top: 40px;
    background: #ffffff;
    border: 3px solid #ccddff;
    box-shadow: 0px 4px 20px rgba(0, 9, 26, 0.1);
    border-radius: 2px;
    .title-box.item1 {
      position: relative;
      .img1 {
        position: absolute;
        width: 80px;
        height: 80px;
        top: -60px;
        left: 50%;
        margin-left: -40px;
      }
      .img11 {
        position: absolute;
        width: 5100px;
        height: 18px;
        left: 950px;
        top: -46px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .title-box.item2 {
      position: relative;
      .img2 {
        position: absolute;
        width: 80px;
        height: 80px;
        top: -60px;
        left: 50%;
        margin-left: -40px;
      }
      .img11 {
        position: absolute;
        width: 3100px;
        height: 18px;
        left: 950px;
        top: -46px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .title-box.item3 {
      position: relative;
      .img3 {
        position: absolute;
        width: 80px;
        height: 80px;
        top: -60px;
        left: 50%;
        margin-left: -40px;
      }
      .img11 {
        position: absolute;
        width: 1172px;
        height: 18px;
        left: 950px;
        top: -46px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .title-box.item4 {
      position: relative;
      .img4 {
        position: absolute;
        width: 80px;
        height: 80px;
        top: -60px;
        left: 50%;
        margin-left: -40px;
      }
    }
    .title {
      margin: 0 auto;
      margin-top: -100px;
      width: 240px;
      padding: 18px 10px;
      font-weight: 700;
      font-size: 20px;
      line-height: 29px;
      text-align: center;
      border: 4px solid #5babfe;
      border-radius: 2px;
      background-color: #fff;
    }
  }
}
</style>

